<!-- 蔬菜类商品列表 -->
<template>
   <el-row>
      <h4>蔬菜类商品列表</h4>
      <el-button type="success" size="default" @click="showDialog">添加商品</el-button>
    </el-row>
    <el-descriptions
      direction="vertical"
      border
      style="margin-top: 20px"
      v-for = "(item, index) in literatureData"
    >
      <el-descriptions-item
        :rowspan="2"
        :width="140"
        label="Photo"
        align="center"
      >
      <img :src= "item.photo" style="width: 100px; height: 100px;">
      </el-descriptions-item>
      <el-descriptions-item label="brandName">{{ item.brandName }}</el-descriptions-item>
      <el-descriptions-item label="introduction">{{ item.introduction }}</el-descriptions-item>
      <el-descriptions-item label="count">{{  item.count }}</el-descriptions-item>
      <el-descriptions-item label="operate">
        <el-button type="danger" size="small" @click="deleteBook(item.id as string)">下架</el-button>
        <el-button type="warning" size="small" @click="modifyBook(item)">修改</el-button>
        <el-button type="primary" size="small" @click="borrowBook(item)">出售</el-button>
      </el-descriptions-item>
    </el-descriptions>
    <Dialog
     @confirm="updateBooks"
     @cancel="(val: boolean) => { dialogVisible = val }"
     v-show="dialogVisible"
     :data="literatureData"
     :itemBook="itemBook"
    ></Dialog>
  </template>


<script lang="ts" setup>
import { type Book, BookStatus, type BorrowBook } from '../../models/book';
import { initLocalStorage,getBooksData, deleteBookData, updateBookData } from '../../models/getBooksData';
import Dialog from '../CustomDialog.vue';
import { onMounted, onRenderTracked, onUpdated, ref, watch } from 'vue';
// 蔬菜类商品列表数据
const literatureData = ref<Book[]>([]);

const itemBook = ref<Book | undefined>(undefined)

onMounted( async () => {
   try{
    const allBooks=getBooksData()
    literatureData.value=allBooks.filter(item => item.status == BookStatus.LITERATURE);
   }catch(error){
    console.error('获取数据失败:',error)
    // 解析失败，重新获取数据
    initLocalStorage()
    const allBooks=getBooksData()
    literatureData.value=allBooks.filter(item => item.status == BookStatus.LITERATURE);
   }
})

// 封装更新数据
function gx(){
  const allBooks=getBooksData()
  literatureData.value=allBooks.filter(item => item.status == BookStatus.LITERATURE);
}

// 弹窗
const dialogVisible = ref(false);
const showDialog = () => {
  itemBook.value = undefined;
  dialogVisible.value = true;
}

// 子组件confirm传值
const updateBooks=(newBooks:Book[])=>{
  literatureData.value=newBooks.filter(item => item.status == BookStatus.LITERATURE)
}

// 删除商品
const deleteBook=(id: string) => {
  // 刷新数据
  if(deleteBookData(id)){
    gx()
  }
}


// 修改商品
const modifyBook = (book: Book) => {
  itemBook.value = {...book};
  dialogVisible.value = true;
}


// 出售商品
const bookList = ref<BorrowBook[]>(JSON.parse(localStorage.getItem('bookList') as string) || []);
const borrowBook = (book: Book) => {
  const allBooks = getBooksData();
  const targetBook = allBooks.find(b => b.id === book.id);
  if (targetBook && targetBook.count > 0) {
    targetBook.count--;
    if (targetBook.count!==0) {
      updateBookData(targetBook)
      bookList.value.push({ book: targetBook, time: new Date().toLocaleString() });
      localStorage.setItem('bookList', JSON.stringify(bookList.value));
      gx();
    }
    if(targetBook.count===0){
      deleteBookData(targetBook.id as string)
      bookList.value.push({ book: targetBook, time: new Date().toLocaleString() });
      localStorage.setItem('bookList', JSON.stringify(bookList.value));
      gx()
    }
  }
};

</script>


<style scoped lang="scss">
 .el-row {
    width: 100%;
    justify-content: space-between;
    align-items: center;
  }
</style>
